<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>两组数据对比</title>
        <link rel="stylesheet" href="//mirror.fe80.cn/layui/2.6.8/css/layui.css">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style>
            .layui-code {margin-top: 0;}
        </style>
    </head>
<body>
    <hr>
    <div class="layui-row">
        <div class="layui-col-md4">
            <form class="layui-form" action="#" onsubmit="return false">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">A组数据</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入A组数据内容" name="group_a" class="layui-textarea" rows="12"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">B组数据</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入B组数据内容" name="group_b" class="layui-textarea" rows="12"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">分割符号</label>
                    <div class="layui-input-block">
                        <!-- <input type="checkbox" checked="" name="switchDemo" lay-skin="switch" lay-filter="switchDemo" lay-text="ON|OFF"> -->
                        <input type="radio" name="splitRadio" value="1" title="换行">
                        <input type="radio" name="splitRadio" value="2" title="空格" checked> 
                        <input type="radio" name="splitRadio" value="3" title="逗号"> 
                        <input type="radio" name="splitRadio" value="4" title="横杠"> 
                        <input type="radio" name="splitRadio" value="5" title="无"> 
                    </div>
                </div>

                <div class="layui-form-item layui-form-text layui-hide show0">
                    <label class="layui-form-label">分割符号</label>
                    <div class="layui-input-block">
                        <!-- <textarea placeholder="请输入内容" name="base64" class="layui-textarea"></textarea> -->
                        <!-- <input type="text" name="splittag" class="layui-input" id="splittag" placeholder="请输入日志名称" value=","> -->
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="generate">立即提交</button>
                        <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="reset">清空</button>
                        <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-col-md8">
            <!-- <div class="grid-demo">50%</div> -->
            <div class="" id="result" style="padding:8px;padding-top: 0px;">
<div style="margin-bottom: 20px;">数据报告：A组源数据xx条，B组源数据xx条，共有数据条，A组有效数据xx条，B组有效数据xx条</div>
<p>共有数据</p>
<pre class="layui-code">

</pre>
<p>A组特有数据</p>
<pre class="layui-code">

</pre>
<p>B组特有数据</p>
<pre class="layui-code">

</pre>
            </div>
        </div>
    </div>
    <hr>
<script src="//mirror.fe80.cn/layui/2.6.8/layui.js" charset="utf-8"></script>
<script>
function diffArray(arr1, arr2) {  
    var a = [], diffA = [], diffB = [], andAB = [];  
  
    for (var i = 0; i < arr1.length; i++) {  
        a[arr1[i]] = true;  
    }  
  
    for (var i = 0; i < arr2.length; i++) {  
        if (a[arr2[i]]) {
            andAB.push(arr2[i]);
            delete a[arr2[i]];
        } else {
            a[arr2[i]] = false;  
        }
    }
  
    for (var k in a) {  
        if (a[k]) {  
           diffA.push(k);  
        } else {
           diffB.push(k);  
        }  
    }  
  
    return {  
        inAButNotInB: diffA,  
        inBButNotInA: diffB,
        inAAndInB: andAB
    };
}
layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form,layer = layui.layer,$=layui.jquery,laydate = layui.laydate;

    //监听提交
    form.on('submit(generate)', function(data){
        console.log(data.field);
        var a = data.field.group_a.split('\n').filter(item => {  
            return item !== null && item !== undefined && item.trim() !== '';  
        });
        var b = data.field.group_b.split('\n').filter(item => {  
            return item !== null && item !== undefined && item.trim() !== '';  
        });
        var list = diffArray(a,b);
        var split_tag = ["\n"," ",",","-",""][data.field.splitRadio-1];
        $('#result').find('pre').eq(0).text(list.inAAndInB.join(split_tag));
        $('#result').find('pre').eq(1).text(list.inAButNotInB.join(split_tag));
        $('#result').find('pre').eq(2).text(list.inBButNotInA.join(split_tag));
        if(data.field.group_b==""){
            $('#result').find('p').eq(0).hide();
            $('#result').find('p').eq(2).hide();
            $('#result').find('pre').eq(0).hide();
            $('#result').find('pre').eq(2).hide();
        }else{
            $('#result').find('p').eq(0).show();
            $('#result').find('p').eq(2).show();
            $('#result').find('pre').eq(0).show();
            $('#result').find('pre').eq(2).show();
        }
        var tips = "数据报告：";
        if(a.length>0) tips += "A组源数据"+a.length+"条，";
        if(b.length>0) tips += "B组源数据"+b.length+"条，";
        if(list.inAAndInB.length>0) tips += "共有数据"+list.inAAndInB.length+"条，";
        if(list.inAButNotInB.length>0) tips += "A组特有数据"+list.inAButNotInB.length+"条，";
        if(list.inBButNotInA.length>0) tips += "B组特有数据"+list.inBButNotInA.length+"条";
        $('#result').find('div').text(tips);
        return false;
    });

    //清空
    form.on('submit(reset)', function(data){
        console.log("清空");
        $("#result").find("pre").remove();
        return false;
    });
    //清空
    form.on('switch(switchDemo)', function(data){
        console.log(data.elem.checked);
        if(!data.elem.checked){
            $(".show0").removeClass('layui-hide');
        }else{
            $(".show0").addClass('layui-hide');
        }
        return false;
    });
});
</script>
</body>
</html>
